import { IModalConfig } from '@/components/page-modal/type'
import { CascaderOption, FormType } from '@/base-ui/base-form/type'
import { ActionDesc } from '@/global/constant'
import addressOptions from '@/assets/data/pcas-code.json'

// 将{name: xx, code: xx, children: xx[]}  ->  {value: xx, label: xx, children: xx[]}
function recurseGetAddressOptions(options: any[]) {
  const newOptions: CascaderOption[] = options.map((item) => {
    const { name, children } = item
    if (children && children.length > 0) {
      const newChildren: CascaderOption[] = recurseGetAddressOptions(children)
      return { value: name, label: name, children: newChildren }
    } else {
      return { value: name, label: name }
    }
  })
  return newOptions
}

// 地址选择数据
const newAddressOptions = recurseGetAddressOptions(addressOptions)

const getUserListModalAddOrEdit = (isAdd = true): IModalConfig => {
  const config: IModalConfig = {
    modalProps: {
      title: isAdd ? '新增用户' : '编辑用户',
      width: 800,
      maskClosable: false,
      closable: false
    },
    formProps: {
      desc: isAdd ? ActionDesc.Add : ActionDesc.Edit,
      layout: { span: 12 },
      formConfig: {
        name: isAdd ? 'user-add' : 'user-edit',
        initialValues: {
          // password1: '',
          // password2: ''
          // sex: ['aaa', 'male']
        },
        size: 'small',
        labelAlign: 'right',
        // labelCol: 输入框这些前面的文字的宽度
        labelCol: { flex: '85px' },
        // labelWrap：表单前面的label宽度(labelCol指定的flex)不够,那么他会进行自动换行
        // labelWrap: true,
        // wrapperCol: { flex: 1 },
        colon: false
        // style: { minWidth: 700 }
      },
      itemsConfig: [
        {
          type: FormType.Input,
          prop: 'userName',
          name: 'userName',
          label: '用户名',
          rules: isAdd ? [{ required: true }] : [],
          input: {
            placeholder: '请输入用户名'
          }
        },
        {
          type: FormType.Radio,
          prop: 'userType',
          name: 'userType',
          label: '账号类型',
          rules: isAdd ? [{ required: true }] : [],
          radio: {
            baseProps: {
              disabled: !isAdd
            },
            options: [
              { value: 0, content: '用户' },
              { value: 1, content: '管理员' }
            ]
          }
        },
        {
          type: FormType.Password,
          prop: 'password',
          name: 'password',
          label: '密码',
          rules: [{ required: true }],
          password: {
            placeholder: '请输入密码'
          }
        },
        {
          type: FormType.Input,
          prop: 'nickName',
          name: 'nickName',
          label: '昵称',
          input: {
            placeholder: '请输入昵称'
          }
        },
        {
          type: FormType.Input,
          prop: 'userPhone',
          name: 'userPhone',
          label: '手机号',
          rules: isAdd
            ? [
                { required: true },
                {
                  message: '手机号格式错误',
                  pattern:
                    /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                }
              ]
            : [],
          input: {
            placeholder: '请输入手机号',
            disabled: !isAdd
          }
        },
        {
          type: FormType.Select,
          prop: 'sex',
          name: 'sex',
          label: '性别',
          rules: isAdd ? [{ required: true }] : [],
          select: {
            baseProps: {
              placeholder: '请选择性别'
            },
            options: [
              { value: 0, content: '女' },
              { value: 1, content: '男' },
              { value: 2, content: '未知' }
            ]
          }
        },
        {
          type: FormType.Input,
          prop: 'email',
          name: 'email',
          label: '邮箱',
          rules: isAdd ? [{ required: true }] : [],
          input: {
            placeholder: '请输入邮箱',
            disabled: !isAdd
          }
        },
        {
          type: FormType.Cascader,
          prop: 'address',
          name: 'address',
          label: '地区',
          rules: isAdd ? [{ required: true }] : [],
          cascader: {
            baseProps: { size: 'small', placeholder: '请选择地区' },
            options: newAddressOptions
          }
        },
        {
          type: FormType.Input,
          prop: 'identityCard',
          name: 'identityCard',
          label: '身份证',
          rules: isAdd
            ? [
                { required: true },
                {
                  message: '身份证格式错误',
                  pattern:
                    /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                }
              ]
            : [],
          input: {
            placeholder: '请输入身份证',
            disabled: !isAdd
          }
        },
        {
          type: FormType.TextArea,
          prop: 'detailAddress',
          name: 'detailAddress',
          label: '详细地址',
          rules: isAdd ? [{ required: true }] : [],
          textArea: {
            placeholder: '请输入详细地址'
          }
        },
        {
          type: FormType.Custom,
          prop: 'headPortrait',
          name: 'headPortrait',
          customkey: 'headPortrait',
          label: '头像'
        }
      ]
    }
  }
  if (!isAdd) {
    const filterItems = [
      'identityCard',
      'userType',
      'email',
      'password',
      'userPhone'
    ]
    config.formProps.itemsConfig = config.formProps.itemsConfig.filter(
      (item: any) => !filterItems.includes(item.name)
    )
  }
  return config as IModalConfig
}

export default getUserListModalAddOrEdit
